<template>
    <svg aria-hidden="true" :class="svgClass" v-bind="$attrs" :style="{color:color,fontSize:size+'px'}">
      <use :xlink:href="symbolId" :fill="color" />
    </svg>
  </template>
  
  <script setup>
import { computed } from 'vue';

  const props = defineProps({
    prefix: {
      type: String,
      default: 'icon',
    },
    name: {
      type: String,
      required: true,
    },
    color: {
      type: String,
      default: '#333',
    },
    size: {
      type: String,
      default: '20',
    },
  })
  const symbolId = computed(() => `#${props.prefix}-${props.name}`)
  const svgClass = computed(()=>{
    if(props.name) return `svg-icon icon-${props.name}`
    return 'svg-icon'
  })
  // import { defineComponent, computed } from 'vue'
  
  // export default defineComponent({
  //   name: 'SvgIcon',
  //   props: {
  //     prefix: {
  //       type: String,
  //       default: 'icon',
  //     },
  //     name: {
  //       type: String,
  //       required: true,
  //     },
  //     color: {
  //       type: String,
  //       default: '#333',
  //     },
  //   },
  //   setup(props) {
  //     const symbolId = computed(() => `#${props.prefix}-${props.name}`)
  //     return { symbolId }
  //   },
  // })
  </script>
  <style scoped>
.svg-icon{
   width: 1em;
   height: 1em;
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;
  }
  </style>